<template>
  <div>
    <div class="header">
      <div class="float">
        <div class="item code" @click="service()">
          <img src="~/static/kf.svg" alt="" />
          <span>客服</span>
        </div>
      </div>
      <div class="topNav">
        <div class="logo">
          <img src="~/static/index/logo-text.svg" alt="" class="logo-img" />
        </div>
        <div class="nav">
          <div class="nav-item"><p @click="goAnchor('#index')">首页</p></div>
          <div class="nav-item">
            <p @click="goAnchor('#product')">产品中心</p>
          </div>
          <div class="nav-item"><p @click="goAnchor('#case')">案例中心</p></div>
          <div class="nav-item">
            <p @click="goAnchor('#about')">关于我们</p>
          </div>

          <div class="nav-item"><p @click="goAnchor('#news')">新闻资讯</p></div>
          <div class="nav-item">
            <p @click="goAnchor('#partner')">合作伙伴</p>
          </div>
          <div class="nav-item">
            <p @click="goAnchor('#phone')">联系我们</p>
          </div>
          <div class="nav-item">
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="color: #000; cursor: pointer; font-size: 16px"
              >
                小程序
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div class="code-item" @mouseenter="current = 1">
                    <div class="left">
                      <img
                        src="~/static/index/logo.svg"
                        alt=""
                        style="height: 40px"
                      />
                    </div>
                    <div class="right">
                      <div class="top">炉管家用户版</div>
                      <div class="bottom">炉管家用户版</div>
                    </div>
                    <div class="img" v-show="current == 1">
                      <img src="~/static/qrcode/user.svg" alt="" />
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="code-item" @mouseenter="current = 2">
                    <div class="left">
                      <img
                        src="~/static/index/logo.svg"
                        alt=""
                        style="height: 40px"
                      />
                    </div>
                    <div class="right">
                      <div class="top">炉管家司炉版</div>
                      <div class="bottom">炉管家司炉版</div>
                    </div>
                    <div class="img" v-show="current == 2">
                      <img src="~/static/qrcode/lukeeper.svg" alt="" />
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="code-item" @mouseenter="current = 3">
                    <div class="left">
                      <img
                        src="~/static/index/logo.svg"
                        alt=""
                        style="height: 40px"
                      />
                    </div>
                    <div class="right">
                      <div class="top">特配商城</div>
                      <div class="bottom">专为锅炉配套而生的MRO商城</div>
                    </div>
                    <div class="img" v-show="current == 3">
                      <img src="~/static/qrcode/cere.svg" alt="" />
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="code-item" @mouseenter="current = 4">
                    <div class="left">
                      <img
                        src="~/static/index/logo.svg"
                        alt=""
                        style="height: 40px"
                      />
                    </div>
                    <div class="right">
                      <div class="top">微信服务号</div>
                      <div class="bottom">锅炉的事 就找炉管家</div>
                    </div>
                    <div class="img" v-show="current == 4">
                      <img src="~/static/h5/gongzhonghao.png" alt="" />
                    </div>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div class="code-item" @mouseenter="current = 5">
                    <div class="left">
                      <img
                        src="~/static/qrcode/liangyuan.svg"
                        alt=""
                        style="height: 40px"
                      />
                    </div>
                    <div class="right">
                      <h2><div class="top">特设助手</div></h2>
                      <div class="bottom">高效落实两个责任</div>
                    </div>
                    <div class="img" v-show="current == 5">
                      <img src="~/static/qrcode/liangyuanCode.svg" alt="" />
                    </div>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div
            class="login"
            @click="loginShow = true"
            style="cursor: pointer"
            v-show="isLogin == false"
          >
            <p>未登录</p>
            <img src="~/static/index/user.svg" alt="" class="user" />
          </div>
          <el-dropdown @command="handleCommand" v-show="isLogin == true">
            <span class="el-dropdown-link">
              <div class="login islogin">
                <p style="color: rgba(255, 117, 18, 1)">
                  {{ userInfo.username }}
                </p>
                <img
                  :src="userInfo.avatarUrl"
                  alt=""
                  class="user"
                  style="
                    border: 1px solid rgba(255, 117, 18, 1);
                    border-radius: 33px;
                  "
                />
              </div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in webList"
                :key="index"
                :command="item.url"
                >{{ item.name }}</el-dropdown-item
              >
              <el-dropdown-item divided command="signout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div>
      <h1 style="display: none;">宁波厚德能源科技有限公司</h1>
    </div>

    <div class="banner" id="index">
      <el-carousel
        trigger="click"
        height="864px"
        indicator-position="none"
        :interval="8000"
      >
        <el-carousel-item>
          <div class="left bg1">
            <h2 class="p1">工业物联网平台</h2>
            <h3 class="p2">智能集成管理一体化</h3>
            <div class="botton-box">
              <div class="botton1" @click="goAnchor('#case')">
                <p style="cursor: pointer">案例中心</p>
              </div>
            </div>
            <div class="case-box">
              <div class="case">
                <img src="~/static/index/data.svg" alt="" class="icon" />
                <div class="text">数据存储分析</div>
              </div>
              <div class="case">
                <img src="~/static/index/service.svg" alt="" class="icon" />
                <div class="text">运维服务</div>
              </div>
              <div class="case">
                <img src="~/static/index/energy.svg" alt="" class="icon" />
                <div class="text">节能核算</div>
              </div>
              <div class="case">
                <img src="~/static/index/warning.svg" alt="" class="icon" />
                <div class="text">故障告警</div>
              </div>
              <div class="case">
                <img src="~/static/index/watch.svg" alt="" class="icon" />
                <div class="text">实施远程监测</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="left bg2" @click="gotoStore">
            <h2 class="p1">特配商城</h2>
            <h3 class="p2">新型数字化采购模式</h3>
            <div class="botton-box">
              <div class="botton1">
                <p>
                  <a
                    href="https://tepeimall.com/"
                    target="_blank"
                    style="color: #fff; text-decoration: none; cursor: pointer"
                    >特配商城</a
                  >
                </p>
              </div>
            </div>
            <div class="case-box">
              <div class="case">
                <img src="~/static/index/aftersale.svg" alt="" class="icon" />
                <div class="text">售后无忧</div>
              </div>
              <div class="case">
                <img src="~/static/index/invoice.svg" alt="" class="icon" />
                <div class="text">增票速开</div>
              </div>
              <div class="case">
                <img src="~/static/index/vip.svg" alt="" class="icon" />
                <div class="text">增值权益</div>
              </div>
              <div class="case">
                <img src="~/static/index/bill.svg" alt="" class="icon" />
                <div class="text">可视账单</div>
              </div>
              <div class="case">
                <img src="~/static/index/custome.svg" alt="" class="icon" />
                <div class="text">专属客服</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="left bg3">
            <h2 class="p1">工业物联网平台</h2>
            <h3 class="p2">智能集成管理一体化</h3>
            <div class="botton-box">
              <div class="botton1">
                <p>
                  <a
                    @click="goAnchor('#phone')"
                    style="color: #fff; text-decoration: none; cursor: pointer"
                    >联系我们</a
                  >
                </p>
              </div>
            </div>
            <div class="case-box">
              <div class="case">
                <img src="~/static/index/data.svg" alt="" class="icon" />
                <div class="text">数据存储分析</div>
              </div>
              <div class="case">
                <img src="~/static/index/service.svg" alt="" class="icon" />
                <div class="text">运维服务</div>
              </div>
              <div class="case">
                <img src="~/static/index/energy.svg" alt="" class="icon" />
                <div class="text">节能核算</div>
              </div>
              <div class="case">
                <img src="~/static/index/warning.svg" alt="" class="icon" />
                <div class="text">故障告警</div>
              </div>
              <div class="case">
                <img src="~/static/index/watch.svg" alt="" class="icon" />
                <div class="text">实施远程监测</div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="product" id="product">
      <div class="title">
        <h2 class="title1">产品中心</h2>
        <p class="title2">PRODUCT CENTER</p>
      </div>
      <div class="text">
        炉管家专注于为各类锅炉生产与使用企业提供具有针对性的工业物联网服务对接与产品供应，高兼容性的适配能力完美的支撑应用扩展，为不同类型的企业客户量身定制智能化产品与服务解决方案。
      </div>
      <div class="product-box">
        <div class="product-item">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">数据集成平台</div>
          </div>
          <img src="~/static/index/product1.svg" alt="" />
        </div>
        <div
          class="product-item"
          style="background: rgba(240, 240, 240, 1); cursor: pointer"
          @click="gotoStore"
        >
          <div class="text-box">
            <div class="text1">锅炉配件</div>
            <div class="text2">特配商城</div>
          </div>
          <img src="~/static/index/product6.svg" alt="" />
        </div>
        <div class="product-item">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">数据分析平台</div>
          </div>
          <img src="~/static/index/product3.svg" alt="" />
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">专家司炉引擎</div>
          </div>
          <img src="~/static/index/product4.svg" alt="" />
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <img src="~/static/index/product5.svg" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">服务管理平台</div>
          </div>
        </div>
        <div class="product-item">
          <img src="~/static/index/product2.svg" alt="" />
          <div class="text-box">
            <div class="text1">智慧锅炉</div>
            <div class="text2">APP应用</div>
          </div>
        </div>
        <div class="product-item" style="background: rgba(240, 240, 240, 1)">
          <img src="~/static/index/product7.png" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">监管治理平台</div>
          </div>
        </div>
        <div class="product-item">
          <img src="~/static/index/product8.svg" alt="" />
          <div class="text-box">
            <div class="text1">数字锅炉</div>
            <div class="text2">物联通讯模块</div>
          </div>
        </div>
      </div>
    </div>
    <div class="example" id="case">
      <div class="title">
        <h2 class="title1">案例中心</h2>
        <p class="title2">CASE CENTER</p>
      </div>
      <div class="text">
        宁波厚德能源科技有限公司作为炉管家售后服务体系建立者，长期深耕于锅炉物联网领域，技术实力雄厚，实战经验丰富。
      </div>
      <div class="example-box">
        <div class="example-item" @click="change(1)">
          <div class="icon1" v-show="checked == 1">
            <img src="~/static/index/example11.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 1">
            <img src="~/static/index/example1.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 1">智慧锅炉房</div>
          <div class="example-title2" v-show="checked != 1">智慧锅炉房</div>
          <div class="border" v-show="checked == 1"></div>
        </div>
        <div class="example-item" @click="change(4)">
          <div class="icon1" v-show="checked == 4">
            <img src="~/static/index/example41.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 4">
            <img src="~/static/index/example4.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 4">炉管家运维平台</div>
          <div class="example-title2" v-show="checked != 4">炉管家运维平台</div>
          <div class="border" v-show="checked == 4"></div>
        </div>
        <div class="example-item" @click="change(5)">
          <div class="icon1" v-show="checked == 5">
            <img src="~/static/index/example51.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 5">
            <img src="~/static/index/example5.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 5">特配商城</div>
          <div class="example-title2" v-show="checked != 5">特配商城</div>
          <div class="border" v-show="checked == 5"></div>
        </div>
        <div class="example-item" @click="change(3)">
          <div class="icon1" v-show="checked == 3">
            <img src="~/static/index/example31.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 3">
            <img src="~/static/index/example3.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 3">
            特种设备物联网平台
          </div>
          <div class="example-title2" v-show="checked != 3">
            特种设备物联网平台
          </div>
          <div class="border" v-show="checked == 3"></div>
        </div>
        <div class="example-item" @click="change(6)">
          <div class="icon1" v-show="checked == 6">
            <img src="~/static/index/example61.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 6">
            <img src="~/static/index/example6.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 6">特设助手</div>
          <div class="example-title2" v-show="checked != 6">特设助手</div>
          <div class="border" v-show="checked == 6"></div>
        </div>
        <div class="example-item" @click="change(2)">
          <div class="icon1" v-show="checked == 2">
            <img src="~/static/index/example21.svg" alt="" class="icon" />
          </div>
          <div class="icon2" v-show="checked != 2">
            <img src="~/static/index/example2.svg" alt="" class="icon" />
          </div>
          <div class="example-title1" v-show="checked == 2">
            云耐压试验&特监之眼
          </div>
          <div class="example-title2" v-show="checked != 2">
            云耐压试验&特监之眼
          </div>
          <div class="border" v-show="checked == 2"></div>
        </div>
      </div>
      <div class="example-image">
        <el-carousel trigger="click" height="769px">
          <el-carousel-item v-for="item in caseList" :key="item">
            <img :src="item" alt="" style="width: 1920px; height: 769px" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="about" id="about">
      <div class="left">
        <div class="title2">关于我们</div>
        <div class="title1">ABOUT US</div>
        <div class="text">
          “炉管家”由宁波厚德能源科技有限公司研发并于2018年注册为业内首个与锅炉智慧运维相关的科技类商标，是一套专业化智能化的锅炉远程管理体系。炉管家售后服务体系以多功能的运维平台为核心，以经验丰富的维修团队首，同时辅以高匹配度与性价比的供应链商城，切实为锅炉用户提供了一系列高效、完整、专业的售后保障与服务体系。
        </div>
        <div class="data-box">
          <div class="data-item">
            <div style="display: flex">
              <p class="value">2015</p>
              <p class="unit">年</p>
            </div>

            <div class="data-text">公司成立</div>
          </div>
          <div class="line"></div>
          <div class="data-item">
            <div style="display: flex">
              <p class="value">1000</p>
              <p class="unit">万</p>
            </div>
            <div class="data-text">注册资本</div>
          </div>
          <div class="line"></div>
          <div class="data-item">
            <div style="display: flex">
              <p class="value">30</p>
              <p class="unit">+</p>
            </div>
            <div class="data-text">知识产权</div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="~/static/index/about.png" alt="" />
      </div>
    </div>
    <div class="new" id="news">
      <div class="title2">新闻资讯</div>
      <div class="title1">NEWS INFORMATION</div>
      <div class="newsList">
        <div class="news" v-for="(item, index) in newsList" :key="index">
          <div class="left">
            <div class="top" style="cursor: pointer" @click="gotoDetail(item)">
              {{ item.name
              }}<img
                src="~/static/index/theTop.svg"
                style="height: 24px; margin-left: 15px"
                v-show="item.top == 1"
              />
            </div>
            <div class="bottom" style="display: flex; align-items: center">
              {{ item.newsCreatedAt }}
            </div>
          </div>
          <nuxt-link
            :title="item.name"
            :to="{ name: 'pc-news-id', params: { id: item.id } }"
            class="right"
            >查看详情</nuxt-link
          >
          <!-- <div class="right" @click="gotoDetail(item)">查看详情</div> -->
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="partner" id="partner">
      <div class="partner-box">
        <div class="title">合作伙伴</div>
        <div class="partners">
          <div class="parter-item">
            <div class="text">战略合作院校</div>
            <img src="~/static/index/zhejiang.svg" alt="" />
            <img src="~/static/index/nottingham.svg" alt="" />
          </div>
          <div class="parter-item">
            <div class="text">战略合作机构</div>
            <!-- <img
              src="~/static/index/nohas.svg"
              alt=""
              style="cursor: pointer"
              @click="gotoNohas"
            /> -->
            <a href="https://www.nuochtec.com" target="_blank"
              ><img src="~/static/index/nohas.svg" alt=""
            /></a>
            <img src="~/static/index/nbtj.svg" alt="" id="phone" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="用户登录"
      :visible="loginShow"
      width="373px"
      :before-close="handleClose"
    >
      <el-input v-model="account" placeholder="账号"></el-input>
      <el-input
        v-model="password"
        placeholder="密码"
        show-password
        style="margin-top: 16px"
      ></el-input>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 308px;
            height: 48px;
            line-height: 48px;
            margin: 0 auto;
            margin-top: 54px;
            background: rgba(255, 117, 18, 1);
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
          "
          @click="handleChange"
        >
          登录
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
import Cookie from "js-cookie";
// import { encrypt, decrypt } from "~/util/rsaEncrypt";

export default {
  layout: "layout",
  name: "index",
  head() {
    return {
      title: " 炉管家 - 锅炉的事，就找炉管家",
    };
  },
  async asyncData({ $indexApi }) {
    const res = await $indexApi.getNews({
      current: 1,
      size: 4,
      descs: "top,news_created_at",
    });
    if (res.code == "0") {
      return {
        //评论列表
        newsList: res.data.records,
        total: res.data.total,
      };
    }
  },
  data() {
    return {
      isLogin: false,
      checked: 1,
      caseList: [require("~/static/case/case1-1.png")],
      caseList1: [require("~/static/case/case1-1.png")],
      caseList2: [
        require("~/static/case/case2-1.png"),
        require("~/static/case/case2-2.png"),
        require("~/static/case/case2-3.png"),
        require("~/static/case/case2-4.png"),
      ],
      caseList3: [require("~/static/case/case3-1.png")],
      caseList4: [
        require("~/static/case/case4-1.png"),
        require("~/static/case/case4-2.png"),
        require("~/static/case/case4-3.png"),
        require("~/static/case/case4-4.png"),
      ],
      caseList5: [
        require("~/static/case/case5-1.png"),
        require("~/static/case/case5-2.png"),
        require("~/static/case/case5-3.png"),
      ],
      caseList6: [require("~/static/case/case6-1.png")],
      loginShow: false,
      account: "",
      password: "",
      data: {},
      userInfo: {},
      webList: [],
      click: true,
      times: null,
      newsList: [],
      current: 1,
      total: 0,
      current: 0,
    };
  },
  created() {
    // if (process.client) {
    //   if (this._isMobile()) {
    //     this.$router.replace("/mobile/");
    //     sessionStorage.setItem("ifNotFirst", true);
    //   }
    // }
    if (Cookie.get("token")) {
      this.isLogin = true;
      this.getWebList();
      this.getUserInfo();
    }
    // this.getNews();
  },
  mounted() {
  },
  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    change(id) {
      this.checked = id;
      // console.log(this.caseList);
      if (id == 1) {
        this.caseList = this.caseList1;
      } else if (id == 2) {
        this.caseList = this.caseList2;
      } else if (id == 3) {
        this.caseList = this.caseList3;
      } else if (id == 4) {
        this.caseList = this.caseList4;
      } else if (id == 5) {
        this.caseList = this.caseList5;
      } else if (id == 6) {
        this.caseList = this.caseList6;
      }
    },
    goAnchor(selector) {
      /*参数selector是id选择器（#anchor14）*/
      // console.log(selector)
      this.$el.querySelector(selector).scrollIntoView();
    },
    handleClose() {
      this.loginShow = false;
      this.account = "";
      this.password = "";
    },
    handleChange() {
      if (this.times) {
        clearTimeout(this.times);
      }
      this.times = setTimeout(() => {
        this.login();
      }, 500);
    },
    async login() {
      let account = this.$encrypt(this.account);
      let password = this.$encrypt(this.password);
      let body = {
        username: account,
        password: password,
        rememberMe: false,
      };

      if (this.click) {
        const res = await this.$indexApi.login(body);
        if (res.code == 0) {
          this.click = false;
          this.data = res.data;
          Cookie.set("token", res.data.token);
          this.isLogin = true;
          this.account = "";
          this.password = "";
          this.$message({
            message: "登录成功",
            type: "success",
            duration: "1000",
            center: true,
          });
          this.getUserInfo();
          this.getWebList();
          this.loginShow = false;
        } else {
          this.$notify({
            title: "登录失败",
            message: "用户名/密码错误！",
            type: "warning",
          });
        }
      }
    },
    async getUserInfo() {
      const res = await this.$indexApi.getUserInfo();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.userInfo = res.data.user;
        }
      }
    },
    async getWebList() {
      const res = await this.$indexApi.getWebList();
      if (res.code == 0) {
        if (res.data == null) {
          this.isLogin = false;
        } else {
          this.webList = res.data;
        }
      }
    },
    async getNews() {
      const res = await this.$indexApi.getNews({
        current: this.current,
        size: 4,
        descs: "top,news_created_at",
      });
      if (res.code == 0) {
        this.newsList = res.data.records;
        this.total = res.data.total;
      }
    },
    handleCommand(command) {
      if (command == "signout") {
        this.signout();
      } else {
        // console.log(command);
        window.open(command, "_blank");
      }
    },
    async signout() {
      const res = await this.$indexApi.signout();
      if (res.code == 0) {
        this.click = true;
        this.isLogin = false;
        Cookie.remove("token");
        this.$message({
          message: "已退出",
          duration: "1000",
          center: true,
        });
        this.$router.push({ path: "/" });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getNews();
    },
    gotoDetail(item) {
      this.$router.push({
        name: "pc-news-id",
        params: {
          id: item.id,
        },
      });
    },
    gotoStore() {
      window.open("https://tepeimall.com/", "_blank");
    },
    gotoNohas() {
      window.open("https://www.nuochtec.com", "_blank");
    },
    //客服
    service() {
      window.open(
        "https://work.weixin.qq.com/kfid/kfca326eda0305bd091",
        "_blank"
      );
    },
  },
};
</script>
<style scoped lang='scss'>
.header {
  height: 96px;
  position: sticky;
  top: calc(-32px);
  display: flex;
  align-items: center;
  z-index: 200;
  // overflow: hidden;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.3);
}
.topNav {
  width: 1500px;
  height: 64px;
  padding: 0 200px;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // position: fixed;
  z-index: 200;
  position: sticky;
  top: 0;
  height: 64px;
  position: sticky;
  // top: calc(-16px);
  .logo {
    .logo-img {
      width: 168px;
      height: 48px;
    }
  }
  .nav {
    display: flex;
    .nav-item {
      height: 48px;
      margin-left: 38px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: -0.14px;
      line-height: 24px;
      color: rgba(56, 56, 56, 1);
      p {
        color: #000;
        font-weight: 500;
        cursor: pointer;
      }
    }
    .login {
      display: flex;
      margin-left: 38px;
      align-items: center;
      padding-left: 6px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.56);
      .user {
        margin-left: 14px;
        width: 33px;
        height: 33px;
      }
    }
    .islogin {
      position: relative;
      .web-box {
        width: 186px;
        position: absolute;
        top: 96px;
        left: -30px;
        padding: 14px 16px;
        z-index: 1;
        .web {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 34px;
          height: 34px;
          color: rgba(0, 0, 0, 0.65);
        }
        .signout {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 34px;
          color: rgba(0, 0, 0, 0.65);
          padding-top: 7px;
          border: 1px solid rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}
.banner {
  height: 796px;
  // padding-top: 64px;
  .bg1 {
    background-image: url("~/static/index/image1.png");
  }
  .bg2 {
    background-image: url("~/static/index/image2.png");
  }
  .bg3 {
    background-image: url("~/static/index/image3.png");
  }
  .left {
    padding-top: 209px;
    padding-left: 334px;
    padding-bottom: 187px;
    .p1 {
      font-size: 88px;
      font-weight: 700;
      letter-spacing: 6px;
      line-height: 100px;
      height: 100px;
      color: rgba(251, 252, 253, 1);
      margin-bottom: 16px;
    }
    .p2 {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 4px;
      line-height: 46px;
      height: 46px;
      color: rgba(251, 252, 253, 1);
      margin-bottom: 40px;
    }
    .botton-box {
      display: flex;
      margin-bottom: 20px;
      .botton1 {
        width: 112px;
        height: 48px;
        border-radius: 48px;
        background: rgba(255, 117, 18, 1);
        box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-right: 12px;
      }
      .botton2 {
        width: 112px;
        height: 48px;
        border-radius: 48px;
        background: rgba(247, 249, 249, 1);
        box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: rgba(13, 21, 46, 0.65);
      }
    }
    .case-box {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      width: 715px;
      .case {
        // display: flex;
        // justify-content: center;
        padding-top: 26px;
        text-align: center;
        .icon {
          width: 61px;
          height: 61px;
          margin: 0 auto;
        }
        .text {
          margin-top: 12px;
        }
      }
    }
  }
}
.product {
  padding: 108px 335px;
  padding-bottom: 0px;
  .title {
    text-align: center;
    .title1 {
      font-size: 50px;
      font-weight: 700;
      line-height: 72px;
      color: rgba(13, 21, 46, 1);
      margin: 0;
    }
    .title2 {
      font-size: 33px;
      font-weight: 500;
      line-height: 33px;
      color: rgba(255, 117, 18, 1);
      margin: 0;
    }
  }
  .text {
    font-size: 28px;
    font-weight: 400;
    line-height: 50px;
    color: rgba(13, 21, 46, 0.65);
    margin: 32px 0;
    text-align: center;
  }
}
.product-box {
  display: flex;
  flex-wrap: wrap;
  .product-item {
    width: 261px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px;
    .text-box {
      .text1 {
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
        color: rgba(0, 0, 0, 0.56);
      }
      .text2 {
        font-size: 25px;
        font-weight: 700;
        line-height: 30px;
        color: rgba(13, 21, 46, 1);
      }
    }
  }
  img {
    width: 60px;
    height: 60px;
  }
}
.example {
  padding-top: 115px;
  .title {
    padding: 0px 98px;
    text-align: center;
    padding: 0 32px;
    .title1 {
      font-size: 50px;
      font-weight: 700;
      line-height: 72px;
      color: rgba(13, 21, 46, 1);
      margin: 0;
    }
    .title2 {
      font-size: 33px;
      font-weight: 500;
      line-height: 33px;
      color: rgba(255, 117, 18, 1);
      margin: 0;
    }
  }
  .text {
    padding: 0 349px;
    font-size: 28px;
    font-weight: 400;
    line-height: 50px;
    color: rgba(13, 21, 46, 0.65);
    margin: 32px 0;
    text-align: center;
  }
  .example-box {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #ffe3c4;
    margin: 0px 248px;
    .example-item {
      margin: 0 33px;
      padding-bottom: 15px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      position: relative;
      cursor: pointer;
      .icon1 {
        margin: 0 auto;
        width: 81px;
        height: 81px;
        border-radius: 81px;
        background: rgba(255, 246, 236, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 48px;
          height: 48px;
        }
      }
      .icon2 {
        margin: 0 auto;
        width: 81px;
        height: 81px;
        border-radius: 81px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 48px;
          height: 48px;
        }
      }
      .example-title1 {
        font-size: 26px;
        font-weight: 500;
        line-height: 40px;
        color: rgba(255, 117, 18, 1);
      }
      .example-title2 {
        font-size: 26px;
        font-weight: 500;
        line-height: 40px;
        color: rgba(13, 21, 46, 0.65);
      }
      .border {
        position: absolute;
        bottom: -3px;
        width: 100%;
        height: 4px;
        background: rgba(255, 117, 18, 1);
      }
    }
  }
  // .example-image {
  //   margin-top: 66px;
  //   border-top: 1px solid rgba(229, 229, 229, 1);
  // }
}
.new {
  padding: 120px 335px;
  .title1 {
    font-size: 33px;
    font-weight: 500;
    line-height: 33px;
    color: rgba(255, 117, 18, 1);
    margin: 0;
  }
  .title2 {
    font-size: 50px;
    font-weight: 700;
    line-height: 72px;
    color: rgb(13, 21, 46);
    margin: 0;
  }
  .newsList {
    margin-top: 33px;
    .news {
      box-shadow: 0px 2px 4px 0px rgba(128, 128, 128, 0.56);
      height: 164px;
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .left {
        width: 1022px;
        padding-left: 32px;
        .top {
          font-size: 32px;
          height: 48px;
          line-height: 48px;
          color: rgba(13, 21, 46, 0.65);
          margin-bottom: 16px;
        }
        .bottom {
          font-size: 28px;
          height: 48px;
          line-height: 48px;
          color: rgba(128, 128, 128, 0.56);
        }
      }
      .right {
        width: 196px;
        height: 116px;
        line-height: 116px;
        font-size: 28px;
        border-left: 2px solid rgba(13, 21, 46, 0.65);
        color: rgba(13, 21, 46, 0.65);
        // padding-left: 32px;
        text-align: center;
        cursor: pointer;
      }
      .right:hover {
        color: rgba(255, 117, 18, 1);
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
}
.about {
  padding: 40px 335px;
  padding-top: 120px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
  .value {
    font-size: 45px;
    font-weight: 400;
    line-height: 60px;
    color: rgba(255, 117, 18, 1);
    margin: 0;
    margin-right: 15px;
  }
  .unit {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 23px;
    color: rgba(13, 21, 46, 0.65);
    margin: 0;
    margin-top: 20px;
  }
  .left {
    margin-right: 73px;
    .title1 {
      font-size: 33px;
      font-weight: 500;
      line-height: 33px;
      color: rgba(255, 117, 18, 1);
      margin: 0;
    }
    .title2 {
      font-size: 50px;
      font-weight: 700;
      line-height: 72px;
      color: rgb(13, 21, 46);
      margin: 0;
    }
    .text {
      font-size: 21px;
      font-weight: 400;
      line-height: 37px;
      color: rgba(13, 21, 46, 0.65);
      margin-top: 40px;
      margin-bottom: 66px;
    }
    .data-box {
      display: flex;
      justify-content: space-between;
      height: 131px;
      .data-item {
        .data-text {
          margin-top: 11px;
          font-size: 27px;
          font-weight: 400;
          line-height: 40px;
          color: rgba(13, 21, 46, 0.65);
        }
      }
      .line {
        height: 116px;
        width: 1px;
        background: #000;
      }
    }
  }
  img {
    width: 469px;
    height: 515px;
  }
}
.partner {
  height: 488px;
  background: url(~/static/index/background1.svg);
  padding: 70px 335px;
  .partner-box {
    background: #fff;
    padding: 69px 46px;
    padding-bottom: 46px;
    position: relative;
    .title {
      position: absolute;
      font-size: 33px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 48px;
      color: rgba(13, 21, 46, 0.65);
      padding: 0 30px;
      top: 45px;
      left: 510px;
      background: #fff;
    }
    .partners {
      border-top: 1px solid rgba(166, 166, 166, 1);
      padding-top: 24px;
      .parter-item {
        display: flex;
        align-items: center;
        margin-top: 38px;
        .text {
          font-size: 28px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 55px;
          color: rgba(56, 56, 56, 1);
          margin-right: 40px;
          border-bottom: 2px solid rgba(56, 56, 56, 1);
        }
        img {
          margin-right: 34px;
          height: 136px;
          border: 0.8px solid rgba(0, 0, 0, 1);
          border-image: linear-gradient(
              to bottom right,
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.37) 34%,
              rgba(235, 235, 235, 0.09) 56%,
              rgb(212, 212, 212) 76%
            )
            30 30;
        }
      }
    }
  }
}
.el-dropdown-menu {
  // left: 1675px !important;
  width: 230px !important;
}
.code-item {
  display: flex;
  align-items: center;
  position: absolute;
  position: relative;
  height: 60px;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    margin-left: 16px;
    .top {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
    }
    .bottom {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 18px;
      color: rgba(13, 21, 46, 0.4);
    }
  }
  .img {
    position: absolute;
    top: 8px;
    left: -180px;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 8px #c7b5a9;
    background: #fff;
    z-index: 3000;
    img {
      width: 142px;
      height: 142px;
    }
  }
}
.float {
  position: fixed;
  bottom: 150px;
  right: 0;
  width: 36px;
  padding: 20px;
  background: #fff;
  z-index: 9;
  border-radius: 5px 0 0 5px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: rgba(0, 0, 0, 1);

    img {
      margin-bottom: 2px;
      width: 24px;
      height: 24px;
    }
  }
}
</style>
  